<template>
  <div class="main">
    <transition
      :duration="{ enter: 800, leave: 300 }"
      leave-active-class="animate__animated animate__fadeOutDown"
    >
      >
      <div class="loin" v-if="loinFlag" @click="leave">
        <ul class="left">
          <li>都</li>
          <li>藏</li>
          <li>着</li>
          <li>故</li>
          <li>事</li>
        </ul>
        <ul class="right">
          <li>每</li>
          <li>一</li>
          <li>杯</li>
          <li>咖</li>
          <li>咖</li>
        </ul>
        <div class="icon">
          <img src="../assets/images/home_active.png" class="a-img" />
          <div class="text">星巴克咖啡</div>
        </div>
      </div>
    </transition>
    <div>
      <!-- 二级路由插座 -->
      <router-view></router-view>
    </div>

    <van-tabbar
      v-model="activeTabIndex"
      inactive-color="#646566"
      active-color="#2BAB7B"
      route
    >
      <van-tabbar-item
        v-for="(item, index) in tarbbarData"
        :key="index"
        :to="item.to"
        :badge="item.id == 2 ? (count == 0 ? '' : count) : ''"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      activeTabIndex: 0,
      loinFlag: false,
      //底部导航
      tarbbarData: [
        {
          title: "首页",
          activeIcon: require("../assets/images/home_active.png"),
          inactiveIcon: require("../assets/images/home.png"),
          //跳转的路由
          to: { name: "Home" },
        },
        {
          title: "菜单",
          activeIcon: require("../assets/images/menu_active.png"),
          inactiveIcon: require("../assets/images/menu.png"),
          to: { name: "MenuPlus" },
        },
        {
          title: "购物车",
          activeIcon: require("../assets/images/shopbag_active.png"),
          inactiveIcon: require("../assets/images/shopbag.png"),
          to: { name: "Shopbag" },
          id: 2,
        },
        {
          title: "我的",
          activeIcon: require("../assets/images/my_active.png"),
          inactiveIcon: require("../assets/images/my.png"),
          to: { name: "My" },
        },
      ],
    };
  },
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
  methods: {
    leave() {
      this.loinFlag = false;
      window.sessionStorage.setItem("loin", true);
    },
  },
  created() {
    console.log(sessionStorage.getItem("loin"));
    if (sessionStorage.getItem("loin") == null) {
      this.loinFlag=true;
      setTimeout(() => {
        this.loinFlag = false;
        window.sessionStorage.setItem("loin", true);
      }, 6000);
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  height: 665px;
  position: relative;
  .loin {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 40;
    background: #fff;
    .left {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 150px;
      font-weight: bold;
      left: 40%;
      top: 40%;
      font-size: 18px;
    }
    .right {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 150px;
      font-weight: bold;
      left: 55%;
      top: 30%;
      font-size: 18px;
    }
    .icon {
      height: 60px;
      width: 70px;
      left: calc(~"50% - 35px");
      text-align: center;
      position: absolute;
      bottom: 10%;
      .a-img {
        height: 50px;
        width: 50px;
        margin: 0px auto;
      }
    }
    .text {
      font-size: 14px;
      font-weight: bold;
      margin-top: 10px;
    }
  }
}
</style>